<template>
  <div>
      <button @click="isShow = !isShow">点击显示或着消失</button>
      <transition name="peiqi">
      <h2 v-show="isShow">这是一个动画</h2>
      </transition>
      
  </div>
</template>

<script>
export default {
    name:'Animation',
    data(){
        return {
            isShow:true
        }
    }
}
</script>

<style scoped>
h2{
    background-color: yellow;
    width:200px;
}
@keyframes atguigu{
    0%{
        transform:translateX(0px)
    }
    100%{
        transform:translateX(-200px)
    }
}
.peiqi-enter-active{
    animation: 1s atguigu linear reverse;
}
.peiqi-leave-active{
    animation: 1s atguigu linear;
}
</style>